<template>
  <Nav>
    {{ $t('union.nav') }}
    <template #right>
      <md-icon name="search" size="lg" @click="router.push('/union/list')"></md-icon>
    </template>
  </Nav>
  <div class="page-union">
    <div class="header" @click="avatar.click()">
      <img src="@/assets/union/avatar_border.png" class="animate__rotate animate__animated animate__infinite animate__slow">
      <img v-if="unionData.logo" :src="unionData.logo" class="avatar">
      <img v-else src="@/assets/union/avatar.png" class="avatar">
      <input ref="avatar" @change="avatarUpload" type="file" capture="camera" accept="image/*" style="display:none">
    </div>
    <div class="name">
      {{ unionData.name }}
      <img src="@/assets/union/icon.png" @click="nameDialog = true" />
    </div>
    <div class="vote">
      <img src="@/assets/union/vote.png" />
      <div class="box">{{ unionData.have_vote }}<b>{{ $t('union.unit') }}</b></div>
    </div>
    <div class="count">{{ $t('union.count') }}: {{ unionData.performance_info ? unionData.performance_info.total : 0 }}</div>
    <md-dialog v-model="nameDialog" :title="$t('put')" :closable="false" :actions="nameAction">
      <md-input-item v-model="unionData.name" :placeholder="$t('union.name')" is-highlight></md-input-item>
    </md-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { unionData, unionInfo, unionUpdate } from '@/model/user'
import { upload } from '@/api/base'
import { t } from '@/lang'
import { toast } from '@/style'
import { packager, random } from '@/web3'
import Nav from '@/components/nav.vue'

const router = useRouter()

// 获取信息
unionInfo()

// 头像更新 
const avatar = ref(null)
const avatarUpload = () => {
  upload(avatar.value.files[0]).then(res => {
    unionData.value.logo = res.path
    // 更新
    update()
  }).catch(err => {
    toast(err.message)
  })
} 

// 更新工会
const update = async() => {
  // 合并数据加入随机符
  const data = Object.assign({random: random()}, unionData.value)
  // 打包数据
  const pack = await packager(data)
  
  toast(t('post'), 'ring', 0)
  unionUpdate(pack).then(res => {
    toast(t('ok'))
  }).catch(err => {
    toast(err.message)
  })
}

// 更新昵称
const nameDialog = ref(false)
const nameAction = [{
  text: t('cancel'),
  handler: () => { 
    unionInfo()
    nameDialog.value = false
  }
}, {
  text: t('confirm'),
  handler: () => { 
    update()
    nameDialog.value = false
  }
}]

</script>

<style lang="scss" scoped>
  .page-union{
    min-height: 100%;
    background: url('@/assets/union/bj.png') center center no-repeat;
    background-size: cover;

    .header{
      width: 250px;
      padding-top: 100px;
      margin: 0 auto;
      position: relative;
      overflow: hidden;

      img{ 
        width: 100%;
      }

      .avatar{
        width: 210px;
        height: 210px;
        position: relative;
        position: absolute;
        top: 120px;
        left: 20px;
        border-radius: 100%;
        object-fit: cover;
      }
    }

    .name{
      padding: 20px;
      margin-top: 10px;
      color: #fff;
      text-align: center;
      font-size: 20px;
      line-height: 25px; 

      img{ 
        display: block;
        margin: 10px auto 0;
        width: 25px;
      }
    }
    
    .count{
      color: #ffc21b;
      text-align: center;
      padding: 35px 0 30px;
    }

    .vote{
      width: 250px;
      margin: 30px auto 0;  
      position: relative;

      img{
        width: 100%; 
      }

      .box{
        width: 100%;
        text-align: center;
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
        font-size: 30px;
        font-weight: bold;
        line-height: 90px;
        b{
          padding-left: 2px;
          font-size: 14px;
        }
      }
    }
  }
</style>